import { Card, Breadcrumb, Form, Input, Button, Radio, Space } from 'antd'
import Channel from 'components/Channel'
import { Link } from 'react-router-dom'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import styles from './index.module.scss'

import { Upload, message, Modal } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { baseURL } from 'utils/request'
import { getToken } from 'utils/storage'
import { useEffect, useRef, useState } from 'react'
import {
  eidtArticleAPI,
  getArticleByIdAPI,
  publishArticleAPI,
} from 'api/articles'
import history from 'utils/history'

export default function ArticlePublish({ match }) {
  // 获取路由中的文章 id
  const id = match.params.id

  // ref 可以用来存储 DOM 元素 或 组件元素
  const formRef = useRef(null)

  const getArticle = async () => {
    const res = await getArticleByIdAPI(id)
    console.log(res.data)
    const { title, channel_id, content, cover } = res.data
    // console.log('formRef.current', formRef.current)
    // 通过表单组件的方法 设置 表单数据
    formRef.current.setFieldsValue({ title, channel_id, content })

    // 设置封面类型
    setCoverType(cover.type)
    // 设置封面图片展示
    const fileList = cover.images.map((item, index) => {
      return {
        uid: index,
        url: item,
      }
    })
    setImages(fileList)
  }

  useEffect(() => {
    if(id) getArticle()
    // 屏蔽掉 eslint 的错误警告
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // console.log(match.params.id)
  // 存草稿 true 为存草稿，false 为发布文章
  const draftRef = useRef(false)
  // 提交表单且数据验证成功后回调事件
  const onFinish = async (values) => {
    // 普通情况：标题，频道，内容，直接表单收集即可
    // console.log('values', values)
    // 特殊情况：封面处理，在两个 state 中获取
    // console.log('images', images)
    // 封面数量校验
    if (coverType !== images.length) return message.warn('封面数量不对', 1)
    const coverImages = images.map((item) => {
      return item.url || item.response.data.url
    })
    const reqParams = {
      ...values,
      // 封面数据
      cover: {
        type: coverType,
        images: coverImages,
      },
      // 存草稿参数
      draft: draftRef.current,
    }
    console.log('发布文章的参数检查', reqParams)
    if (id) {
      // 有 id 编辑文章，记得带上文章 id
      reqParams.id = id
      await eidtArticleAPI(reqParams)
    } else {
      // 没有 id 修改文章
      await publishArticleAPI(reqParams)
    }
    // 发布成功提示
    message.success(`${id ? '修改' : '发布'}成功`, 1)
    // 跳转列表页
    history.push('/list')
  }

  const [images, setImages] = useState([])

  const props = {
    fileList: images,
    accept: '.png,.jpg,.jpeg',
    listType: 'picture-card',
    action: baseURL + '/v1_0/upload',
    name: 'image',
    headers: {
      Authorization: `Bearer ${getToken()}`,
    },
    // 文件列表发生了变化
    onChange({ file, fileList }) {
      // console.log('文件列表发生了变化', { file, fileList })
      setImages(fileList)
      // 上传完成判断
      if (file.status === 'done') {
        message.success(`${file.name} 上传成功.`)
      }
      // 上传失败判断
      else if (file.status === 'error') {
        message.error(`${file.name} 上传失败.`)
      }
    },
    // 上传前的处理
    beforeUpload: (file) => {
      // 允许上传的格式
      const isAllowType = ['image/png', 'image/jpeg'].includes(file.type)
      // 如果不是允许的格式
      if (!isAllowType) {
        message.error(`${file.name}文件格式不对`)
      }
      // 如果需要阻止列表展现，可以通过返回 Upload.LIST_IGNORE 实现。
      return isAllowType ? true : Upload.LIST_IGNORE
    },
    // 点击预览小眼睛
    onPreview: (file) => {
      // console.log(file)
      // 设置预览图片地址
      setPreviewImage(file.thumbUrl || file.url)
    },
  }

  // 预览图片地址
  const [previewImage, setPreviewImage] = useState('')

  // 切换封面类型
  const [coverType, setCoverType] = useState(1)
  const coverTypeChange = (newType) => {
    // 设置封面类型
    // setCoverType(newType)
    setCoverType((oldType) => {
      // console.log({ oldType, newType })
      // 切换到无图的时候清空数组
      if (newType === 0) {
        setImages([])
      }
      // 由 3图变成 1图的时候截取数组的第一项
      else if (oldType === 3 && newType === 1) {
        const newImages = images.slice(0, 1)
        setImages(newImages)
      }
      // 💥记得更新CoverType的值
      return newType
    })
  }

  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            {id ? (
              <Breadcrumb.Item>
                <Link to="/list">文章列表</Link>
              </Breadcrumb.Item>
            ) : null}
            <Breadcrumb.Item>{id ? '编辑文章' : '发布文章'}</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form
          ref={formRef}
          size="large"
          labelCol={{
            span: 4,
          }}
          // 设置字段触发验证的时机
          validateTrigger={['onBlur', 'onChange']}
          // 提交表单且数据验证成功后回调事件
          onFinish={onFinish}
          initialValues={{
            title: '',
            channel_id: 0,
            content: '',
          }}
        >
          <Form.Item
            label="标题"
            // 表单校验需要指定 name 和 rules 属性
            name="title"
            rules={[{ required: true, message: '请输入文章标题' }]}
          >
            <Input placeholder="请输入文章标题" />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: '请选择频道' }]}
          >
            <Channel />
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[
              { required: true, message: '请输入文章内容' },
              {
                validator: (_, value) => {
                  // console.log(value === '<p><br></p>' ? '校验不通过' : '通过')
                  return value === '<p><br></p>'
                    ? Promise.reject('请输入文章内容')
                    : Promise.resolve()
                },
              },
            ]}
          >
            <ReactQuill theme="snow" placeholder="请输入文章内容..." />
          </Form.Item>
          {/* 封面 - 单选框部分 */}
          <Form.Item label="封面">
            <Radio.Group
              value={coverType}
              onChange={(e) => coverTypeChange(e.target.value)}
            >
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 封面 - 上传组件部分 */}
          <Form.Item wrapperCol={{ offset: 4 }}>
            {/* 上传组件 */}
            <Upload {...props}>
              {images.length < coverType ? <PlusOutlined /> : null}
            </Upload>
            {/* 预览弹窗 */}
            <Modal
              visible={previewImage !== ''}
              title={'预览图片'}
              footer={null}
              onCancel={() => setPreviewImage('')}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 4,
            }}
          >
            <Space>
              {/* 发布按钮 */}
              <Button type="primary" htmlType="submit">
                {id ? '修改' : '发布'}文章
              </Button>
              {/* 存草稿按钮 */}
              <Button
                htmlType="submit"
                onClick={() => {
                  draftRef.current = true
                }}
              >
                存草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
